<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="名称">
        <el-input v-model="queryForm.name" placeholder="请输入名称" clearable />
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="queryForm.categoryId" placeholder="请选择" clearable>
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadFoodList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveFood(null)">添加菜品</el-button>
    </div>

    <el-table :data="foodList" stripe>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="categoryName" label="分类名称" />



      

      <el-table-column label="图片">
        <template #default="scope">
          <el-image style="height: 25px; border: none; 
          cursor: pointer;vertical-align: top" :src="scope.row.photo" id="myImage" @click="imgBig()" />
        </template>
      </el-table-column>





      <el-table-column prop="price" label="价格" width="100" />

      <el-table-column label="状态" width="100">
        <template #default="scope">
          <div class="table-column-status" :class="{ 'stop-use': scope.row.status == '0' }">
            {{ scope.row.status == '0' ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveFood(scope.row.id)">编辑</el-button>

          <el-button size="small" type="danger"
            @click="handleUpdateStatus(scope.row.id, scope.row.status == 1 ? 'inactive' : 'active')">
            {{ scope.row.status == '1' ? '禁用' : '启用' }}
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="queryForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handlePageChange" />
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { getFoodList, updateStatus } from "@/api/food"
import { getCategoryList } from "@/api/category"
import { ElMessageBox } from "element-plus";

const router = useRouter();

const queryForm = reactive({ name: null, categoryId: null, page: 1, pageSize: 10 });

let foodList = reactive([]);
let categoryList = reactive([]);

let total = ref(0);


//加载全部菜品分类
getCategoryList().then((resp) => {
  categoryList.push(...resp.data);
});

let handleSaveFood = (foodId) => {
  if (foodId) {
    //编辑
    router.push({ path: '/food/save', query: { foodId: foodId } })
  } else {
    //添加
    router.push({ path: '/food/save' })
  }
}


//更新状态
let handleUpdateStatus = (foodId, status) => {
  //确认对话框
  ElMessageBox.confirm(
    "是否修改状态?",
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    updateStatus(foodId, status).then(resp => {
      loadFoodList()
    })
  }).catch(() => {
  })
}

//定义方法
let loadFoodList = () => {
  //准备数据
  getFoodList(queryForm).then((resp) => {
    foodList.length = 0;
    foodList.push(...resp.data);

    total.value = resp.total;
  });
}

let handleSizeChange = (pageSize) => {
  queryForm.pageSize = pageSize;
  loadFoodList()
}

let handlePageChange = (page) => {
  queryForm.page = page;
  loadFoodList();
}

let imgBig = () => {
  // for (var img = document.getElementById('myImage')) {
  // }
    var img = document.getElementById('myImage')
      img.style.width = '100%'; // 设置图片宽度为100%
      img.style.height = 'auto'; // 自适应高度
      img.style.position = 'fixed'; // 固定在屏幕上
      img.style.top = '0'; // 设置图片顶部位置
      img.style.left = '0'; // 设置图片左侧位置
      img.style.zIndex = '9999'; // 设置图片层级
      img.style.cursor = 'zoom-out'; // 鼠标样式变为缩小图标
}


loadFoodList();
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
